<template>
  <div>
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item ref="name" label="事件名称" prop="name">
        <a-input v-model="form.name" placeholder="请输入" />
      </a-form-model-item>
      <a-form-model-item label="事件类别" prop="eventCategory">
        <a-select v-model="form.eventCategory" placeholder="请选择">
          <a-select-opt-group label="婚恋家庭纠纷">
            <a-select-option value="0101">
              {{ this.filterMultiDictText1('event_category', '0101') }}
            </a-select-option>
            <a-select-option value="0102">
              {{ this.filterMultiDictText1('event_category', '0102') }}
            </a-select-option>
            <a-select-option value="0103">
              {{ this.filterMultiDictText1('event_category', '0103') }}
            </a-select-option>
            <a-select-option value="0199">
              {{ this.filterMultiDictText1('event_category', '0199') }}
            </a-select-option>
          </a-select-opt-group>
          <a-select-opt-group label="邻里纠纷">
            <a-select-option value="0201">
              {{ this.filterMultiDictText1('event_category', '0201') }}
            </a-select-option>
            <a-select-option value="0202">
              {{ this.filterMultiDictText1('event_category', '0202') }}
            </a-select-option>
            <a-select-option value="0203">
              {{ this.filterMultiDictText1('event_category', '0203') }}
            </a-select-option>
            <a-select-option value="0299">
              {{ this.filterMultiDictText1('event_category', '0299') }}
            </a-select-option>
          </a-select-opt-group>
          <a-select-opt-group label="人格权纠纷">
            <a-select-option value="0301">
              {{ this.filterMultiDictText1('event_category', '0301') }}
            </a-select-option>
            <a-select-option value="0302">
              {{ this.filterMultiDictText1('event_category', '0302') }}
            </a-select-option>
            <a-select-option value="0303">
              {{ this.filterMultiDictText1('event_category', '0303') }}
            </a-select-option>
            <a-select-option value="0399">
              {{ this.filterMultiDictText1('event_category', '0399') }}
            </a-select-option>
          </a-select-opt-group>
          <a-select-opt-group label="物权相关纠纷">
            <a-select-option value="0401">
              {{ this.filterMultiDictText1('event_category', '0401') }}
            </a-select-option>
            <a-select-option value="0402">
              {{ this.filterMultiDictText1('event_category', '0402') }}
            </a-select-option>
            <a-select-option value="0403">
              {{ this.filterMultiDictText1('event_category', '0403') }}
            </a-select-option>
            <a-select-option value="0499">
              {{ this.filterMultiDictText1('event_category', '0499') }}
            </a-select-option>
          </a-select-opt-group>
          <a-select-opt-group label="侵权相关纠纷">
            <a-select-option value="0501">
              {{ this.filterMultiDictText1('event_category', '0501') }}
            </a-select-option>
            <a-select-option value="0502">
              {{ this.filterMultiDictText1('event_category', '0502') }}
            </a-select-option>
            <a-select-option value="0503">
              {{ this.filterMultiDictText1('event_category', '0503') }}
            </a-select-option>
            <a-select-option value="0504">
              {{ this.filterMultiDictText1('event_category', '0504') }}
            </a-select-option>
            <a-select-option value="0505">
              {{ this.filterMultiDictText1('event_category', '0505') }}
            </a-select-option>
            <a-select-option value="0506">
              {{ this.filterMultiDictText1('event_category', '0506') }}
            </a-select-option>
            <a-select-option value="0507">
              {{ this.filterMultiDictText1('event_category', '0507') }}
            </a-select-option>
            <a-select-option value="0599">
              {{ this.filterMultiDictText1('event_category', '0599') }}
            </a-select-option>
          </a-select-opt-group>
          <a-select-opt-group label="合同及相关纠纷">
            <a-select-option value="0601">
              {{ this.filterMultiDictText1('event_category', '0601') }}
            </a-select-option>
            <a-select-option value="0602">
              {{ this.filterMultiDictText1('event_category', '0602') }}
            </a-select-option>
            <a-select-option value="0603">
              {{ this.filterMultiDictText1('event_category', '0603') }}
            </a-select-option>
            <a-select-option value="0604">
              {{ this.filterMultiDictText1('event_category', '0604') }}
            </a-select-option>
            <a-select-option value="0699">
              {{ this.filterMultiDictText1('event_category', '0699') }}
            </a-select-option>
          </a-select-opt-group>
          <a-select-opt-group label="劳动人事争议">
            <a-select-option value="0701">
              {{ this.filterMultiDictText1('event_category', '0701') }}
            </a-select-option>
            <a-select-option value="0702">
              {{ this.filterMultiDictText1('event_category', '0702') }}
            </a-select-option>
            <a-select-option value="0703">
              {{ this.filterMultiDictText1('event_category', '0703') }}
            </a-select-option>
            <a-select-option value="0704">
              {{ this.filterMultiDictText1('event_category', '0704') }}
            </a-select-option>
            <a-select-option value="0799">
              {{ this.filterMultiDictText1('event_category', '0799') }}
            </a-select-option>
          </a-select-opt-group>
          <a-select-opt-group label="金融借贷纠纷">
            <a-select-option value="0801">
              {{ this.filterMultiDictText1('event_category', '0801') }}
            </a-select-option>
            <a-select-option value="0802">
              {{ this.filterMultiDictText1('event_category', '0802') }}
            </a-select-option>
            <a-select-option value="0803">
              {{ this.filterMultiDictText1('event_category', '0803') }}
            </a-select-option>
            <a-select-option value="0804">
              {{ this.filterMultiDictText1('event_category', '0804') }}
            </a-select-option>
            <a-select-option value="0899">
              {{ this.filterMultiDictText1('event_category', '0899') }}
            </a-select-option>
          </a-select-opt-group>
          <a-select-opt-group label="土地及资源权属纠纷">
            <a-select-option value="0901">
              {{ this.filterMultiDictText1('event_category', '0901') }}
            </a-select-option>
            <a-select-option value="0902">
              {{ this.filterMultiDictText1('event_category', '0902') }}
            </a-select-option>
            <a-select-option value="0903">
              {{ this.filterMultiDictText1('event_category', '0903') }}
            </a-select-option>
            <a-select-option value="0904">
              {{ this.filterMultiDictText1('event_category', '0904') }}
            </a-select-option>
            <a-select-option value="0999">
              {{ this.filterMultiDictText1('event_category', '0999') }}
            </a-select-option>
          </a-select-opt-group>
          <a-select-opt-group label="其他民商纠纷">
            <a-select-option value="1001">
              {{ this.filterMultiDictText1('event_category', '1001') }}
            </a-select-option>
            <a-select-option value="1002">
              {{ this.filterMultiDictText1('event_category', '1002') }}
            </a-select-option>
            <a-select-option value="1003">
              {{ this.filterMultiDictText1('event_category', '1003') }}
            </a-select-option>
            <a-select-option value="1004">
              {{ this.filterMultiDictText1('event_category', '1004') }}
            </a-select-option>
            <a-select-option value="1005">
              {{ this.filterMultiDictText1('event_category', '1005') }}
            </a-select-option>
            <a-select-option value="1006">
              {{ this.filterMultiDictText1('event_category', '1006') }}
            </a-select-option>
            <a-select-option value="1099">
              {{ this.filterMultiDictText1('event_category', '1099') }}
            </a-select-option>
          </a-select-opt-group>
          <a-select-opt-group label="城乡建设发展纠纷">
            <a-select-option value="1111">
              {{ this.filterMultiDictText1('event_category', '1101') }}
            </a-select-option>
            <a-select-option value="1102">
              {{ this.filterMultiDictText1('event_category', '1102') }}
            </a-select-option>
            <a-select-option value="1103">
              {{ this.filterMultiDictText1('event_category', '1103') }}
            </a-select-option>
            <a-select-option value="1104">
              {{ this.filterMultiDictText1('event_category', '1104') }}
            </a-select-option>
            <a-select-option value="1105">
              {{ this.filterMultiDictText1('event_category', '1105') }}
            </a-select-option>
            <a-select-option value="1199">
              {{ this.filterMultiDictText1('event_category', '1199') }}
            </a-select-option>
          </a-select-opt-group>
          <a-select-opt-group label="村(社区)选举和管理">
            <a-select-option value="1201">
              {{ this.filterMultiDictText1('event_category', '1201') }}
            </a-select-option>
            <a-select-option value="1202">
              {{ this.filterMultiDictText1('event_category', '1202') }}
            </a-select-option>
            <a-select-option value="1203">
              {{ this.filterMultiDictText1('event_category', '1203') }}
            </a-select-option>
            <a-select-option value="1299">
              {{ this.filterMultiDictText1('event_category', '1299') }}
            </a-select-option>
          </a-select-opt-group>
          <a-select-opt-group label="其他行政执法纠纷">
            <a-select-option value="1301">
              {{ this.filterMultiDictText1('event_category', '1301') }}
            </a-select-option>
            <a-select-option value="1302">
              {{ this.filterMultiDictText1('event_category', '1302') }}
            </a-select-option>
            <a-select-option value="1303">
              {{ this.filterMultiDictText1('event_category', '1303') }}
            </a-select-option>
            <a-select-option value="1304">
              {{ this.filterMultiDictText1('event_category', '1304') }}
            </a-select-option>
            <a-select-option value="1313">
              {{ this.filterMultiDictText1('event_category', '1313') }}
            </a-select-option>
            <a-select-option value="1306">
              {{ this.filterMultiDictText1('event_category', '1306') }}
            </a-select-option>
            <a-select-option value="1307">
              {{ this.filterMultiDictText1('event_category', '1307') }}
            </a-select-option>
            <a-select-option value="1399">
              {{ this.filterMultiDictText1('event_category', '1399') }}
            </a-select-option>
          </a-select-opt-group>
          <a-select-opt-group label="涉法涉诉纠纷">
            <a-select-option value="1401">
              {{ this.filterMultiDictText1('event_category', '1401') }}
            </a-select-option>
            <a-select-option value="1402">
              {{ this.filterMultiDictText1('event_category', '1402') }}
            </a-select-option>
            <a-select-option value="1403">
              {{ this.filterMultiDictText1('event_category', '1403') }}
            </a-select-option>
            <a-select-option value="1404">
              {{ this.filterMultiDictText1('event_category', '1404') }}
            </a-select-option>
          </a-select-opt-group>
          <a-select-opt-group label="涉组织涉纪检纠纷">
            <a-select-option value="1501">
              {{ this.filterMultiDictText1('event_category', '1501') }}
            </a-select-option>
            <a-select-option value="1502">
              {{ this.filterMultiDictText1('event_category', '1502') }}
            </a-select-option>
            <a-select-option value="1503">
              {{ this.filterMultiDictText1('event_category', '1503') }}
            </a-select-option>
            <a-select-option value="1504">
              {{ this.filterMultiDictText1('event_category', '1504') }}
            </a-select-option>
          </a-select-opt-group>
          <a-select-opt-group label="涉民族宗教纠纷">
            <a-select-option value="1601">
              {{ this.filterMultiDictText1('event_category', '1601') }}
            </a-select-option>
            <a-select-option value="1602">
              {{ this.filterMultiDictText1('event_category', '1602') }}
            </a-select-option>
          </a-select-opt-group>
          <a-select-option value="99">
            {{ this.filterMultiDictText1('event_category', '99') }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="发生日期" required prop="occurrenceDate">
        <a-date-picker v-model="form.occurrenceDate" valueFormat="YYYY-MM-DD" />
      </a-form-model-item>
      <a-form-model-item ref="name" label="发生地" prop="occurrencePlace">
        <a-select v-model="form.occurrencePlace" placeholder="请选择发生地">
          <a-select-option v-for="(item, index) in diqu" :value="item.name" :key="index">
            {{ item.fullName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item ref="name" label="发生地详址" prop="detailedAddress">
        <!--        <a-input v-model="form.detailedAddress" placeholder="请输入"/>-->
        <a-select v-model="form.detailedAddress" :show-search="true" :allowClear="false"
          :default-active-first-option="false" :show-arrow="false" :filter-option="false" :not-found-content="null"
          style="width: 100%" placeholder="请输入" @search="onSearch" @change="onChange">
          <a-select-option v-for="(item, key) in positionList" :key="key" :value="item">{{
            item.address
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item ref="name" label="经纬度" prop="longitude">
        <a-input v-model="form.longitude" placeholder="经度" style="width: 45%; margin-right: 10%" />
        <a-input v-model="form.latitude" placeholder="纬度" style="width: 45%;" />

      </a-form-model-item>
      <a-form-model-item label="事件规模" prop="eventScale">
        <a-select v-model="form.eventScale" placeholder="请选择">
          <a-select-option v-for="(item, index) in eventScaleArr" :value="item.value" :key="index">
            {{ item.text }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item ref="name" label="涉及人数" prop="peopleInvolvedNumber">
        <a-input-number id="inputNumber" v-model="form.peopleInvolvedNumber" />
      </a-form-model-item>
      <a-form-model-item label="涉及单位" prop="unitsInvolved">
        <a-input v-model="form.unitsInvolved" placeholder="请输入" />
      </a-form-model-item>
      <a-form-model-item label="事件简述" prop="eventOverview">
        <a-input v-model="form.eventOverview" type="textarea" placeholder="请输入" />
      </a-form-model-item>
      <a-form-model-item ref="from" label="上传附件">
        <j-upload v-model="fileListStr" @change="uploadChange" />
        <div style="color: #b1b1b1"> 支持扩展名：.rar .zip .doc .docx .pdf .jpg... </div>
      </a-form-model-item>
    </a-form-model>
    <Map ref="mapDrawId" @pisitionList="onPisitionList" />
  </div>
</template>

<script>
import { getDictItemsFromCache } from '@api/api'
import { getfrom, updata } from '@api/xlgc/lawCase'
import Input from '@/views/xlgc/lawCase/LifeCase/detailed/ImportModal'
import Map from '@/views/xlgc/modules/map'
export default {
  name: 'basic',
  components: { Input, Map },
  props: {
    basics: Number
  },
  data() {
    return {
      niTitle: [],
      diqu: [],
      visible: false,
      fileList: [],
      fileListStr: undefined,
      labelCol: { span: 10 },
      wrapperCol: { span: 6 },
      other: '',
      eventScaleArr: this.filterMultiDictText('event_scale', ''),
      form: {
        // assignmentName: "",
        detailedAddress: undefined,
        eventCategory: undefined,
        eventOverview: "",
        eventScale: undefined,
        latitude: '',
        longitude: '',
        name: "",
        occurrenceDate: "",
        occurrencePlace: undefined,
        peopleInvolvedNumber: 0,
        unitsInvolved: "",

      },
      rules: {
        name: [{ required: true, message: '请输入案事件名称', trigger: 'blur' }],
        eventCategory: [{ required: true, message: '请选择事件类别', trigger: 'blur' }],
        occurrenceDate: [{ required: true, message: '请选择发生日期', trigger: 'blur' }],
        occurrencePlace: [{ required: true, message: '请输入发生地', trigger: 'blur' }],
        detailedAddress: [{ required: true, message: '请输入发生地详址', trigger: 'blur' }],
        eventScale: [{ required: true, message: '请选择事件规模', trigger: 'blur' }],
        eventOverview: [
          { required: true, message: '事件概述', trigger: 'blur' },
          { min: 5, message: '请输入至少五个字符', trigger: 'blur' }
        ],
        peopleInvolvedNumber: [
          { required: true, message: '请输入涉及人数', trigger: 'blur' }
        ]
      },
      dateFormat: 'YYYY-MM-DD',
      positionList: [],
      bal: false
    };
  },
  mounted() {
    getfrom()
      .then(res => {
        console.log(res)
        this.diqu = res.result
      })
      .catch(e => {
        this.$message.warn('请求失败！')
      })
  },
  methods: {
    setControl(obj, file) {
      // console.log("2222")
      // console.log(file)
      this.form = obj
      if (file != undefined) {
        this.fileListStr = file
      }
      if (this.form.sex) {
        this.form.sex = this.form.sex === '男' ? 0 : 1
      }
    },
    // nameTitle(val){
    //   this.bal = true
    //   this.niTitle.push(val)
    // },
    onPisitionList(arr) {
      this.positionList = arr
    },
    onSearch(val) {
      if (val == '') {
        return
      }
      this.$refs.mapDrawId.getPositionList(val)
    },
    onChange(val) {
      if (val != undefined) { }
      console.log(val)
      this.form.detailedAddress = val.address
      this.form.latitude = val.latitude
      this.form.longitude = val.longitude
    },
    // inputse(val){
    //   let arr = []
    //   arr.push(val)
    //   this.$emit('fileListse',arr)
    // },
    // showModal(val) {
    //   this.visible = true;
    // },
    handleOk() {
      this.$refs.inpute.handleOk()
    },
    uploadChange() {
      console.log(this.fileListStr)
      let fileLists = this.fileListStr.split(',')
      this.$emit('fileListse', fileLists)
    },
    // handleRemove(file) {
    //   const index = this.fileList.indexOf(file);
    //   const newFileList = this.fileList.slice();
    //   newFileList.splice(index, 1);
    //   this.fileList = newFileList;
    // },
    // beforeUpload(file) {
    //   this.fileList = [...this.fileList, file];
    //   return false;
    // },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    // filterMultiDictText(dictCode, text) {
    //   console.log(dictCode,text)
    //   if (!text && text !== 0) return
    //   let datas = getDictItemsFromCache(dictCode)
    //   // return this.$filterMultiDictText(datas, text)
    //   return this.$filterDictText(datas, text)
    // },
    filterMultiDictText(dictCode, text) {
      // console.log(dictCode,text)
      // if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // console.log(this.$filterDictText(datas, text))
      // return this.$filterMultiDictText(datas, text)
      // return this.$filterDictText(datas, text)
      // console.log(datas)
      return datas
    },
    filterMultiDictText1(dictCode, text) {
      // console.log(dictCode,text)
      if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    },
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        console.log(valid)
        // this.passCheck = valid
        this.$emit('passCheck', valid)

        return valid
      });
    },

  },
  watch: {
    form: {
      deep: true,
      handler(a, b) {
        console.log(this.form)
        this.$emit('basicses', this.form)
      }
    },
    niTitle: {
      deep: true,
      handler(a, b) {
        this.niTitle = a
      }
    }

  }
}
</script>

<style scoped></style>